<template>
  <TablePage>
    <template #top>
      <SearchForm title="角色管理" :keyword-search-data="[{ key: 'tollGateName', label: '角色名称' }]">
        <template #extraButtons>
          <a-button type="primary" @click="showCreateModal">新增角色</a-button>
        </template>
      </SearchForm>
    </template>
    <SlTable :columns="columns" row-key="id" :data-source="tableData" :pagination="pagination" :loading="tableLoading">
      <template #bodyCell="{ column, record }">
        <div v-if="column.key === 'oper' && !record.admin">
          <a @click="showUpdateModal(record)">编辑</a>
          <a class="ml-2 text-red-400" @click="handleDelete(record)">删除</a>
        </div>
      </template>
    </SlTable>
    <CURDDialog
      id-key="roleId"
      :columns="columns"
      create-title="新增角色"
      update-title="编辑角色"
      delete-message="确认删除该角色吗？"
      :show-options="showOptions"
      :model="model"
      :model-form-setting="modelFormSetting"
      :model-rules="modelRules"
      :table-data="tableData"
      :oper-data="operData"
      :curd="curd"
      :reload-table="reloadTable"
      :delete-url-suffix-mode="2"
      :get-detail="getDetail"
      @before-ok="beforeOk"
    />
  </TablePage>
</template>
<script lang="ts" setup>
import { h, onMounted, ref } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { handleDateRowRender } from "/@/utils/common";
import { FormItemComponentType, CURDAction, CURDModalEvent } from "/@/components/CURDDialog/models";
import type { FormItemData, OperItem, ShowCURDModalOptions } from "/@/components/CURDDialog/models";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import { Api } from "/@/api/home/role";
import { RoleItem, PartialRoleItem } from "/@/api/home/role/models";
import MenuTree from "/@/components/MenuTree.vue";
import { getRoleMenu } from "/@/api/home/menu";

const { t } = useI18n();
const columns = ref<TableProps<PartialRoleItem>["columns"]>([
  {
    title: "角色名称",
    dataIndex: "roleName",
  },
  {
    title: "角色权限",
    dataIndex: "roleKey",
  },
  {
    title: "角色排序",
    dataIndex: "roleSort",
  },
  {
    title: t("common.oper"),
    key: "oper",
    width: 100,
  },
]);
const model = ref<PartialRoleItem>({
  roleName: "",
  roleKey: "",
  roleSort: 999,
  menuIds: [],
});
const modelRules = ["roleName", "roleKey", "roleSort", "menuIds"];
const modelFormSetting: FormItemData<PartialRoleItem>[] = [
  {
    key: "roleName",
    max: 32,
    pattern: PatternKey.code,
  },
  {
    key: "roleKey",
    max: 32,
    pattern: PatternKey.code,
  },
  {
    key: "roleSort",
    type: FormItemComponentType.NUMBER,
    props: {
      min: 0,
      max: 999,
    },
  },
  {
    key: "menuIds",
    label: "菜单权限",
    customComponent: h(MenuTree),
  },
];

const showOptions = ref<ShowCURDModalOptions>();

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<PartialRoleItem>({
  getDataUrl: Api.roleList,
  createUrl: Api.role,
  updateUrl: Api.role,
  deleteUrl: Api.role,
});

const operData: OperItem<PartialRoleItem>[] = [
  {
    label: t("common.edit"),
    handler: showUpdateModal,
  },
];
function showCreateModal() {
  showOptions.value = { action: CURDAction.CREATE };
}
function showUpdateModal(record) {
  showOptions.value = { action: CURDAction.UPDATE, record };
}
function handleDelete(record) {
  showOptions.value = { action: CURDAction.DELETE, record };
}

function beforeOk(e: CURDModalEvent<PartialRoleItem>) {
  if (e.action === CURDAction.CREATE && e.model) {
    e.model.status = 0;
  }
}

async function getDetail(record: PartialRoleItem) {
  const data = await getRoleMenu(record.roleId as number);
  return {
    menuIds: data ? data.checkedKeys : {},
  };
}
</script>
